<template>
  <div class="page-container">
    <a-card :bodyStyle="{ padding: '0' }" :bordered="false">
      <a-tabs v-model:active-key="activeTabkey">
        <a-tab-pane v-for="item in tabList" :key="item.key" :title="item.title" :destroy-on-hide="item.key == '4'">
          <template v-if="item.key == '1'">
            <card class="insure-card" title="车辆信息">
              <car-info-block :carInfo="carInfo" :fieldList="fieldList" :tags="[carInfo.eventStatusStr]" />
            </card>
            <ViolationInfo title="违章信息" :data="violantionList">
              <template #orderNo="{ data }">
                <span v-if="data.value.orderCode">
                  <a-link @click="() => onLink(data)" type="link">{{ data.value.orderCode }}</a-link>
                  <div>(交车人：{{ data.value.giveStaffName || '-' }})</div>
                </span>
                <span v-else>-</span>
              </template>
              <template #lesseeInfo="{ data }">
                <div v-if="data.value.memberName && data.value.memberPhone"> {{ data.value.memberName }} {{ data.value.memberPhone }} </div>
                <div v-else>-</div>
              </template>

              <template #fieldList="{ data }">
                <div class="flex">
                  <a-space :size="16">
                    <UploadImg disabled :single="false" :modelValue="data.value" />
                  </a-space>
                </div>
              </template>
            </ViolationInfo>
            <a-divider />
            <template v-if="carInfo.handleType !== 1">
              <a-descriptions
                title="行驶证记录"
                :label-style="{
                  textAlign: 'right',
                  width: '156px',
                  paddingRight: '10px',
                  color: 'rgb(var(--gray-8))',
                }"
                :value-style="{ width: '450px' }"
                :column="4"
              >
                <template v-for="list of carInfo.driveLicenseRecordList" :key="list.id">
                  <a-descriptions-item :label="`${list.label}时间`">
                    {{ list.driveLicenseUseTime }}
                  </a-descriptions-item>
                  <a-descriptions-item :label="list.name">
                    {{ list.depositStateName }}
                  </a-descriptions-item>
                  <a-descriptions-item label="押金金额">
                    {{ unitVal(list.depositAmount) }}
                  </a-descriptions-item>
                  <a-descriptions-item label="上传凭证">
                    <UploadImg disabled :single="false" :modelValue="list.fileIdList" />
                  </a-descriptions-item>
                </template>
              </a-descriptions>
            </template>
            <a-divider v-if="carInfo.handleType !== 1" />
            <div style="margin-bottom: 12px; font-weight: 500; font-size: 16px; color: rgb(29, 33, 41)">催缴记录</div>
            <a-table :columns="columns" :data="tableData" size="small" />
          </template>

          <template v-if="item.key == '2'">
            <div class="menus">
              <div
                :class="['menus-item', menu.active ? 'active' : '']"
                v-for="(menu, index) in menus"
                :key="index"
                @click="chooseMenu(menu.deIndex)"
              >
                {{ menu.name }}
              </div>
            </div>
            <feeInfo v-if="activeTabCost == 0" :id="Number(routeParams.id)" :carInfo="carInfo" />
            <three-order v-if="activeTabCost == 1" :orderId="carInfo.orderId" bizType="3" />
          </template>
          <template v-if="item.key == '3'">
            <OperateLog :id="routeParams.id" type="5" />
          </template>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script setup name="CarViolationDetail" lang="ts">
  import ThreeOrder from '@/views/order/short-order/detail/components/three-order.vue'
  import feeInfo from '../detail/components/fee-info.vue'
  import { ref, watch, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import ViolationInfo from './components/violation-info.vue'
  import { getViolationDetail, checkCallRecord } from '@/api/asset/carViolation'
  import useNavigate from '@/hooks/useNavigate'
  import { unitVal } from '@/utils'
  const { navigateTo } = useNavigate()

  const route = useRoute()
  const routeParams = route.params
  const routeQuery = route.query
  const activeTabkey = ref('1')
  const violantionList = ref<any>([])
  const activeTabCost = ref(0)
  const menus = ref([
    { name: '费用明细', deIndex: 0, active: true },
    { name: '三方支付账单', deIndex: 1 },
  ])
  const fieldList = ref([
    { label: '车架号', prop: 'vin' },
    { label: '车辆当前归属门店', prop: 'carSiteName' },
    { label: '归属车场', prop: 'libraryName' },
    { label: '违章单号', prop: 'violantionCode' },
  ])

  const tabList = ref([
    { title: '违章信息', key: '1' },
    // { title: '费用信息', key: '2' },
    { title: '操作记录', key: '3' },
  ])

  const chooseMenu = (i: any) => {
    menus.value.forEach((e) => {
      i == e.deIndex ? (e.active = true) : (e.active = false)
      activeTabCost.value = i
    })
  }

  const onLink = (data: any) => {
    console.log('data', data)

    if (data.value.orderType == 3) {
      navigateTo(`/long-order/detail/${data.value.orderId}`, `${data.value.orderCode}-长租详情`)
    } else {
      navigateTo(`/short-order/detail/${data.value.orderId}`, `${data.value.orderCode}-短租详情`)
    }
  }

  const tableData = ref([])

  const columns = [
    {
      title: '催缴状态',
      dataIndex: 'urgeFeeStatusName',
      render: () => {
        return '已催缴'
      },
    },
    {
      title: '操作人',
      dataIndex: 'createUserName',
    },
    {
      title: '时间',
      dataIndex: 'createTime',
    },
    {
      title: '催缴说明',
      dataIndex: 'description',
    },
  ]

  watch(
    () => routeQuery.tab,
    (newVal) => {
      if (newVal) activeTabkey.value = routeQuery.tab as string
    },
    { immediate: true }
  )

  // 获取车辆详情
  const carInfo = ref<any>({})
  const getViolationInfo = (id: string | string[]) => {
    getViolationDetail({ id }).then((res: any) => {
      const result = res.result

      result.driveLicenseRecordList.forEach((item: any) => {
        if (item.driveLicenseUseState == 1) {
          item.label = '行驶证借出'
          item.name = '是否收取押金'
        } else if (item.driveLicenseUseState == 2) {
          item.label = '行驶证归还'
          item.name = '是否归还押金'
        }
      })

      carInfo.value = { ...result, modelName: result.carModelName }
      console.log('carInfo', carInfo.value)

      violantionList.value = [
        {
          label: '违章单关联门店',
          value: result.siteName,
        },
        {
          label: '违章时间',
          value: result.eventTime,
        },
        {
          label: '违章发生方',
          value: result.violationPartyName,
        },
        {
          label: '关联订单号',
          value: {
            orderCode: result.orderCode,
            giveStaffName: result.giveStaffName,
            orderId: result.orderId,
            orderType: result.orderType,
          },
          slotName: 'orderNo',
        },
        {
          label: '违章城市',
          value: result.eventCityName,
        },
        {
          label: '违章地点',
          value: result.eventAddress,
          span: 24,
        },
        {
          label: '违章行为',
          value: result.eventContent,
          span: 24,
        },
        {
          label: '罚分',
          value: `${result.eventScore} 分`,
        },
        {
          label: '罚款',
          value: unitVal(result.eventAmount),
        },
        {
          label: '处理方',
          value: result.handleTypeName,
        },
        {
          label: '负责人',
          value: result.staffName,
        },

        {
          label: '违章押金收取方式',
          value: result.violationChargeTypeName,
        },
        {
          label: '备注',
          value: result.remark,
        },
        {
          label: '附件',
          value: result.fileIdList,
          slotName: 'fieldList',
        },
      ]

      if (result.handleType === 1) {
        tabList.value = [
          { title: '违章信息', key: '1' },
          { title: '费用信息', key: '2' },
          // { title: '三方支付账单', key: '4' },
          { title: '操作记录', key: '3' },
        ]

        const additionalFields = [
          { label: '具体代办方式', value: result.specificHandleWayName },
          { label: '违章代办收入', value: unitVal(result.incomeAmount) },
          { label: '代办服务费', value: unitVal(result.handleAmount) },
          { label: '代办真实成本', value: unitVal(result.handleRealCost) },
        ]

        violantionList.value.splice(10, 0, ...additionalFields)
      }

      if (result.orderCode) {
        violantionList.value.splice(2, 0, {
          label: '承租人信息',
          value: { memberName: result.memberName, memberPhone: result.memberPhone },
          slotName: 'lesseeInfo',
        })
      }
    })
  }

  onMounted(() => {
    if (routeParams.id) {
      getViolationInfo(routeParams.id)
      checkCallRecord({ id: routeParams.id }).then((res: any) => {
        if (res.code == 200) {
          tableData.value = res.result.urgeList || []
        }
      })
    }
  })

  defineExpose({
    getViolationInfo,
  })
</script>

<style lang="less" scoped>
  .basic-info-wrapper {
    .section-item {
      .section-item-header {
        color: #1d2129ff;
        font-weight: 500;
      }
      .section-item-content {
        padding: 20px 20px 0 20px;
        .basic-info {
          .car-info {
            margin-top: 14px;
            &.car-main-info {
              height: 28px;
              margin-top: 0;
              line-height: 28px;
            }
            .license-number {
              font-size: 20px;
              font-weight: 600;
              color: #1d2129;
              vertical-align: bottom;
            }
          }
        }
      }
      &.gray {
        background-color: rgba(var(--gray-1), 0.5) !important;
        border-radius: 0px 0px 0px 0px;
        .section-item-content {
          padding: 20px 20px 12px 20px;
        }
      }
    }
    .section-item + .section-item {
      margin-top: 16px;
    }
  }

  .menus {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    .menus-item {
      color: #4e5969;
      font-size: 28rpx;
      padding: 5px 16px;
      margin-right: 12px;
      font-weight: 400;
      cursor: pointer;
    }
    .active {
      border-radius: 30px;
      color: #1890ff;
      font-weight: 500;
      background: #f2f3f5;
    }
  }
</style>
